<template>
	<view class="easy_center_y text-sm mb-[120rpx] mt-2">
		<view class="bg-[#fff] w-[96%] rounded-md pr-4">
			<!-- 油 -->
			<view class="easy_start">
				<image class="w-[30vw] h-[30vw]" src="../../assets/oil.svg" />
				<view class="w-[70%]">
					<view
						v-for="(item, index) in initData.oilLists"
						:key="index"
					>
						<view class="easy_between">
							<text class="mb-1 ellipsis w-[30%]">{{
								item.name
							}}</text>
							<text class="mr-6 mb-1">{{ item.weight }}g</text
							><text class="mr-6"
								>{{ item.proportion }}%</text
							></view
						>
					</view></view
				>
			</view>
		</view>
		<view class="easy_between w-[96%] mt-2">
			<!-- 水 -->
			<view class="bg-[#fff] flex-1 mr-2 rounded-md pr-4">
				<view class="easy_start">
					<view class="w-[30vw] h-[30vw] relative">
						<image
							class="w-[30vw] h-[30vw]"
							src="../../assets/water.svg"
						/>
						<view
							class="text-[#fff] text-sm absolute top-3 left-0 bottom-0 right-2 flex items-center justify-center"
							>水</view
						>
					</view>
					<text class="text-sm">{{ initData.waterWeight }}g</text>
				</view>
			</view>
			<!-- 碱 -->
			<view class="bg-[#fff] flex-1 rounded-md pr-4">
				<view class="easy_start"
					><view class="w-[30vw] h-[30vw] relative">
						<image
							class="w-[30vw] h-[30vw]"
							src="../../assets/NaOH.svg"
						/>
						<view
							class="text-[#fff] text-sm absolute top-8 left-3 bottom-0 right-2 flex items-center justify-center"
							>碱</view
						>
					</view>
					<text class="text-sm"
						>{{ initData.NaOHWeight }}g</text
					></view
				>
			</view>
		</view>
		<!-- 其他添加物 -->
		<view
			class="bg-[#fff] w-[96%] mt-2 rounded-md pr-4 pt-3 pb-3"
			v-if="initData.otherLists?.length > 0"
			><view class="easy_start">
				<image
					class="w-[28vw] h-[28vw]"
					src="../../assets/essentialOil.svg"
				/>
				<view class="w-[48%]">
					<view
						v-for="(item, index) in initData.otherLists"
						:key="index"
					>
						<view class="easy_between">
							<text class="mr-6 mb-1">{{ item.name }}</text>
							<text class="mr-6">{{ item.weight }}g</text></view
						>
					</view></view
				>
			</view></view
		>
		<!-- 计算结果 -->
		<view class="bg-[#fff] w-[96%] rounded-md mt-2 p-4">
			<view class="table">
				<!-- 表头(即第一行) -->
				<view class="tr">
					<view class="th">名称</view>
					<view class="th">重量(g)</view>
				</view>
				<!-- 表格第二行 -->
				<view v-for="(v, index) in computedData" :key="index">
					<view class="tr">
						<view class="td">{{ v.name }}</view>
						<view class="td">{{ v.weight }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 备注 -->
		<view
			v-if="initData.remark"
			class="bg-[#fff] w-[96%] rounded-md mt-2 p-4 mb-[146rpx]"
		>
			<view class="remark">备注</view>
			<view class="w-full pt-2 pl-2 pr-2">{{ initData.remark }}</view>
		</view>
	</view>
	<!-- 底部按钮 -->
	<view
		style="
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 3vw 4vw;
			z-index: 999;
		"
	>
		<view
			class="h-full w-[49%] easy_center bg-[#f7f8fa] mr-[2vw] rounded-md"
			@tap="goBack"
			>取消</view
		><view
			class="h-full w-[49%] easy_center bg-[#6066ea] text-[#fff] rounded-md"
			@tap="confirm"
			>保存配方</view
		>
	</view>
	<!-- 确认命名弹框 -->
	<nut-dialog
		title="提示"
		v-model:visible="visible"
		:before-close="handleClose"
		@cancel="visible = false"
	>
		<view>
			<nut-input
				v-model="formulaName"
				placeholder="输入皂皂名"
				input-align="center"
				:border="false"
		/></view>
	</nut-dialog>
	<!-- 前往查看弹框 -->
	<nut-dialog
		title="保存成功"
		content="是否前往查看配方详情?"
		v-model:visible="visible1"
		@cancel="visible1 = false"
		@ok="handleView"
	/>
</template>
<script setup lang="ts">
import { addRecipe } from '@/services/api';
import Taro, { eventCenter, getCurrentInstance, useLoad } from '@tarojs/taro';
import { SafeArea } from '@/components/SafeArea/index';
import { ref, computed } from 'vue';

const initData = ref({ oilLists: [] });
const computedData = ref([] as any[]);
const visible = ref(false);
const visible1 = ref(false);

const handleView = () => {
	// Taro.navigateTo({
	// 	url: '/pages/recipeDetail/index',
	// });
};
const handleClose = () => {
	if (!formulaName.value) {
		Taro.showToast({
			title: '请输入皂皂名称',
			icon: 'none',
		});
		return false;
	} else {
		visible.value = false;
		// const { type, activeTab, NaOHPurity, ...rest } = initData.value;
		// // 报存配方
		// const data = {
		// 	formulaName: formulaName.value,
		// 	applyType: type,
		// 	calculationMethod: activeTab == 1 ? 'BY_WEIGHT' : 'BY_PERCENTAGE',
		// 	...rest,
		// 	oilDetail: null,
		// 	sodaPurity: NaOHPurity,
		// 	superFatAddition: null,
		// };
		// addRecipe(data).then((res) => {
		// 	console.log(res, 'res');
		// 	visible.value = false;
		// });

		visible1.value = true;
		return true;
	}
};
const formulaName = ref('');

useLoad(() => {
	const router = getCurrentInstance().router;
	if (router && router.params && router.params.obj) {
		initData.value = JSON.parse(decodeURIComponent(router.params.obj));
		console.log(initData.value, 'initData');
	}
	const {
		totalOilWeight,
		otherWeight,
		totalINS,
		substractNaOH,
		totalWeight,
		type,
	} = initData.value;
	console.log(totalWeight, 'totalWeight');

	computedData.value = [
		{ name: '油相总重', weight: totalOilWeight },
		{ name: '超脂/添加物', weight: otherWeight },
		{ name: '减碱', weight: substractNaOH + '%' },
		{ name: '入模总重', weight: totalWeight },
	];
	if (type == 'solid') {
		computedData.value.push({
			name: 'INS值(建议120~160)',
			weight: totalINS,
		});
	}
});
const confirm = () => {
	formulaName.value = '';
	visible.value = true;
	// eventCenter.trigger('addOil', oilList);
	// Taro.navigateBack();
};

const goBack = () => {
	Taro.navigateBack();
};
</script>
<style>
.table {
	display: flex;
	flex-direction: column; /* 排列形式: 向下 */
}

.tr {
	display: flex;
	flex-direction: row;
}

.th,
.td {
	/* 公有的属性 */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* 自动换行 */
	width: 50%;
	text-align: center; /* 文本居中 */
	justify-content: center; /* 主轴居中 */
	align-items: center; /* 交叉轴居中 */
	border-top: 1px solid #dadada; /* 单元格上线框 */
	border-bottom: 1px solid #dadada; /* 单元格下线框 */
	border-left: 1px solid #dadada; /* 单元格左线框 */
	border-right: 1px solid #dadada; /* 单元格右线框 */
	height: 60px;
}

.th {
	font-weight: 800; /* 字体加重 */
	background-color: #a8abe5; /* 背景色 */
	height: 60px;
}

.td {
	background-color: #fff; /* 背景色 */
}
.remark {
	font-weight: 800;
	background-color: #a8abe5;
	height: 60px;
	line-height: 60px;
	width: 100%;
	padding-left: 30px;
}
</style>
